In the last lesson, we covered the basics of the Dutch bar by creating a simple label, a button with
which to open the main windows dev tools and a flexible spacer in between.
So in this lesson, then we'll take a look at a few of the other slightly more advanced components available
on the touch bar.
Note that for now will only cover the component layouts in the next lesson, will connect these more
advanced components and add some simple functionality to them back in the main TouchPad module documentation.
Let's start by adding a color picture component.
This one here for now, we're not going to need to set any options on this back in mind, which is where
we left off in the previous lesson.
I'll create that color picker component on a new variable as before assigning to TB Pyka.
A new touch, Baudot Touch, Bacalar Pyka.
Adding that after the label and before the flexible space, this label can now also serve the purpose
of naming the PICC button.
I'll change that to a theme save to test this.
And we get this color back a button with a label indicating what it's for, although, as mentioned
will add this functionality in the next lesson.
Click this stepping us into a completely new touch by instance, created by the component itself and
revealing a selection of color palettes currently being in the Ojibwe selection.
We can change that here to, for example, a simple color picker.
So all the functionality of this component being handled for us by the TouchPad module, then back to
the docs to try another component.
And this time around, let's see the touch slider.
We'll have to set some options on this component, even though they are all optional.
The slider really does have to be configured to make any sense as before, create the slider component.
Sticking to the naming convention of TB slider equals a new touch by a slider from the touch bar with
an options object in which we can start by setting a label.
I'll call this size a minimum value for the slider to be able to go down to, say, five hundred and
a max value of 1000.
These values will make more sense in the next lesson, but essentially we'll use the slider to resize
the main window at that to the main touch bar after the color picker.
And as we'll see in a second, this slider component uses the same sizing logic as a flexible spacer
so it will try and take whatever space is available, meaning to have it fill the entire space between
the color picker and the button.
I'll have to remove the flexible spacer save to test.
And there we get that side slider, which now takes up all of the space previously occupied by the flexible
spacer.
But moving into the even more advanced layouts, let's say you don't want this slider to take up the
entire bar and would rather nested in a new touchpad like the color picker.
We can do that with another component called touch popover.
Popovers do exactly what we saw with the color picker.
They provide a simple button component that opens a completely new nested touch bar, which we can see
by this item's option being the same as we have in the main touch by instance for specifying components.
So let's see that create a new popover.
Assigning to TV popover a new touchpad popover.
With a label of size, so same as the slider as that's the only component will add to this pop over
and items this items option being slightly different to when we create a new touchpad in that it doesn't
take an array of components directly, but rather a complete touch by instance with its own items being
the touchpad that will be nested inside of the popover.
I'll create that in line to this option.
New touch bar.
And now, as we have here, items taking an array of components in which I'll add the slider teeb slider
replacing in our main touchpad the slider with this popover and restoring the flexible spacer to keep
that Deftones button to the right.
Save this.
Our slider is now gone in favor of this popover button.
Click that and we get the slider with access to the full real estate of the touchpad being nested in
its own touch.
By now.
We also have this close button to exit the popover and return to the main touch bar in.
The next lesson will continue with this new layout and add some logic to these components.